<template>
  <el-row id="product1">
    <h5>临摹图标</h5>
    <transition name="flip"  v-on:enter="iconEnter">
    <el-col :span="16" :offset="4" class="tubiao animated" v-if="imgShow"  >

      <el-col :span="8" v-for="item in imgList" v-bind:key="item" v-if="imgShow"><img :src="item.url" alt=""/></el-col>

    </el-col>
    </transition>
  </el-row>
</template>
<style>
  #product1 {
    min-height: 520px;
  }
  #product1 h5 {margin-bottom: 56px;}
  #product1 .tubiao img {margin-bottom: 0px;}
  #product1 .tubiao {margin-bottom: 29px;}
  #product1 .tubiao .el-col {overflow: hidden ;}
  #product1 .tubiao img{width: 100%;display: block}
  #product1 .tubiao img:hover {transition: 1s;transform:scale(1.18) }
</style>
<script>
  export default {
      data(){
          return {
              imgList : {},
              imgShow : false
          }
      },
    methods : {
      iconEnter(el , done){
          console.log(el)
        el.className = el.className + ' rotateIn';
      },
      windowScrolls () {
        if (this.$el.offsetTop < window.scrollY + 300 ) {
          this.imgShow = true;
        }
      }
    },
    mounted(){
      window.addEventListener('scroll', this.windowScrolls)

      this.axios.get(this.$store.state.API_ROOT+ 'studentProduct1').then((response) => {
        this.imgList = response.data
      })
    }
  }
</script>
